<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
    <table width="100%">
        <thead><tr><td width="90%">内容</td><td width="10%">操作</td></tr></thead>
        <tbody></tbody>
    </table>
<script>
    var oUl = document.getElementsByTagName('tbody')[0];
    document.addEventListener("DOMContentLoaded", function(){
      // Handler when the DOM is fully loaded
      Ajax.get("/api/user",function(data){
        var resp = JSON.parse(data);
        if(resp.resultCode=="SUCCESS"){
            for (var i = 0; i < resp.data.length; i++) {
                var oLi = document.createElement('tr');
                var row = resp.data[i];
                oLi.innerHTML = "<td><textarea rows=3 style='width:98%;height:98%' id="+row._id+">"+JSON.stringify(row)+'</textarea></td><td><button onclick="updateRow('+row._id+')">修改</button></td>';
                oUl.appendChild(oLi);
            }
        }
      })
    }); 
    updateRow = function(id){
        var u = document.getElementById(id).value;
        console.log(u);
        Ajax.post("/api/user",u,function(data){
            var resp = JSON.parse(data);
            if(resp.resultCode=="SUCCESS"){
                alert("修改成功");
            }
        });
    }
    var Ajax = {
        get: function(url,fn){
            // XMLHttpRequest对象用于在后台与服务器交换数据
            var xhr=new XMLHttpRequest();
            xhr.open('GET',url,true);
            xhr.onreadystatechange=function(){
                // readyState == 4说明请求已完成
                if(xhr.readyState==4){
                    if(xhr.status==200 || xhr.status==304){
                        // console.log(xhr.responseText);
                        fn.call(this,xhr.responseText);
                    }
                }
            }
            xhr.send();
        },

        // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        post: function(url,data,fn){
            var xhr=new XMLHttpRequest();
            xhr.open('POST',url,true);
            // 添加http头，发送信息至服务器时内容编码类型
            xhr.setRequestHeader('Content-Type','application/json');
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4){
                    if (xhr.status==200 || xhr.status==304){
                        // console.log(xhr.responseText);
                        fn.call(this,xhr.responseText);
                    }
                }
            }
            xhr.send(data);
        }
    }
</script>
</body>
</html>